<template>
  <div>
    <!-- 头部 --start-->
    <div class="nav">
      <p>
        <span>.</span>
        {{ this.pgTitle }}
      </p>

      <div id="nav_go5">
        <el-button
          type="info"
          icon="el-icon-back"
          class="btn_fanhui"
          @click="revert()"
        >返回
        </el-button
        >
      </div>
    </div>
    <!-- 头部 --end-->
    <div class="bigbox">
      <!-- 客户信息 --start-->
      <div class="conter_box1" :data="listData.clientMessage">
        <p>客户信息</p>
        <ul>
          <li>
            <span>客户编号</span>
            <template>
              <el-select
                placeholder="请输入客户编号"
                style="width: 70%"
                v-model="listData.clientMessage.enterpriseNumber"

                value-key="id"
                :disabled="true"
              >
                <el-option
                  v-for="item in clientIdarr"
                  :key="item.key"
                  :label="item.enterpriseNumber"
                  :value="item"
                ></el-option>
              </el-select>
            </template>
          </li>
          <li>
            <span>客户名称</span>
            <el-input style="width: 70%" v-model="listData.clientMessage.enterpriseName" :disabled="true">
            </el-input>
            <!-- <el-select
              placeholder="请选择客户名称"
              style="width: 70%"
              v-model="listData.clientName"
            >
              <el-option
                v-for="item in clientNamearr"
                :key="item.key"
                :label="item.value"
                :value="item.value"
              ></el-option>
            </el-select> -->
          </li>
          <li>
            <span>联系人</span>
            <el-input
              placeholder="请输入联系人"
              style="width: 70%"
              v-model="listData.clientMessage.contacts"
              :disabled="true"
            ></el-input>
          </li>
          <li>
            <span>联系方式</span>
            <el-input
              placeholder="请输入联系方式"
              style="width: 70%"
              v-model="listData.clientMessage.contactsPhone"
              :disabled="true"
            ></el-input>
          </li>
          <li>
            <span>企业地址</span>
            <el-input
              placeholder="请输入企业地址"
              style="width: 70%"
              v-model="listData.clientMessage.adress"
              :disabled="true"
            ></el-input>
          </li>
        </ul>
      </div>
      <!-- 客户信息 --end-->

      <!-- 合同信息 --start-->
      <div class="conter_box2" :data="listData">
        <p>合同信息</p>
        <ul>
          <li>
            <span>合同编号</span>
            <el-input
              placeholder="请输入合同编号"
              style="width: 70%"
              v-model="listData.contractNumber"
              :disabled="true"
            ></el-input>
          </li>
          <li>
            <span>合同类型</span>
            <el-select
              placeholder="请选择合同类型"
              style="width: 70%"
              v-model="listData.leixing"
              :disabled="true"
            >
              <el-option
                v-for="item in leixingarr"
                :key="item.key"
                :label="item.value"
                :value="item.value"
                :disabled="true"
              ></el-option>
            </el-select>
          </li>
          <li>
            <span>状态</span>
            <el-input v-model="listData.status" style="width: 70%" :disabled="true"></el-input>
            <!--            <el-select-->
            <!--              placeholder="请选择状态"-->
            <!--              style="width: 70%"-->
            <!--              v-model="listData.status"-->
            <!--             -->
            <!--              :disabled="true"-->
            <!--            >-->
            <!--              <el-option-->
            <!--                v-for="item in statusarr"-->
            <!--                :key="item.key"-->
            <!--                :label="item.value"-->
            <!--                :value="item.value"-->
            <!--                :disabled="true"-->
            <!--              ></el-option>-->
            <!--            </el-select>-->
          </li>
          <li>
            <span>币别</span>
            <el-select
              placeholder="请选择币种"
              style="width: 70%"
              v-model="listData.bibie"
              :disabled="true"
            >
              <el-option
                v-for="item in bibiearr"
                :key="item.key"
                :label="item.value"
                :value="item.value"
                :disabled="true"
              ></el-option>
            </el-select>
          </li>
          <li>
            <span>生效日期</span>
            <el-date-picker
              v-model="listData.shengxiaoTime"
              type="date"
              placeholder="选择日期"
              style="width: 70%"
              :disabled="true"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </li>
          <li>
            <span>失效日期</span>
            <el-date-picker
              v-model="listData.shixiaoTime"
              type="date"
              placeholder="选择日期"
              style="width: 70%"

              :disabled="true"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </li>
        </ul>
      </div>
      <!-- 产品信息 --end-->
      <!-- 产品价格 start-->
      <div class="conter_box3">
        <p>产品价格</p>
        <template>
          <el-table :data="clientProducts" style="width: 100%" max-height="310px">
            <el-table-column label="序号" align="center" type="index" width="140"/>
            <el-table-column label="产品图号" align="center">
              <template slot-scope="scope">
                <!--                <el-input v-model="scope.row.productTuhao" :disabled="!esits"></el-input>-->

                <el-select
                  v-model="scope.row.productTuhao"
                  @change="GetProMess(scope.$index, $event)"
                  value-key="id"
                  placeholder="请选择状态"
                  :disabled="scope.row.id !=null"
                >
                  <el-option
                    v-for="item in productLists"
                    :key="item.id"
                    :label="item.productTuhao"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="产品名称" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.productName" :disabled="true"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="单位" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.danwei" :disabled="true"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="含税单价 (元)" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.price" :disabled="scope.row.id !=null"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="税率" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.shuilv" :disabled="scope.row.id !=null"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="生效日期" align="center">
              <template slot-scope="scope">
                <el-date-picker
                  v-model="scope.row.createonTime"
                  type="date"
                  placeholder="选择日期"
                  style="width: 90%"
                  :disabled="scope.row.id !=null"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </template>
            </el-table-column>
            <el-table-column label="状态" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.status == 1">待审核</span>
                <span v-if="scope.row.status == 2">驳回</span>
                <span v-if="scope.row.status == 3">已成功</span>
                <span v-if="scope.row.status == 4">启用</span>
                <span v-if="scope.row.status == 5">关闭</span>
                <!--                <el-input v-model="scope.row.status" :disabled="true">-->

                <!--                </el-input>-->
                <!--                <el-select-->
                <!--                  placeholder="请选择状态"-->
                <!--                  v-model="scope.row.status"-->
                <!--                  :disabled="!esits"-->
                <!--                >-->
                <!--                  <el-option-->
                <!--                    v-for="item in statusarr1"-->
                <!--                    :key="item.key"-->
                <!--                    :label="item.value"-->
                <!--                    :value="item.key"-->
                <!--                  ></el-option>-->
                <!--                </el-select>-->
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center"  v-if="esits==true">
              <template slot-scope="scope">
                <el-button type="primary" size="small" @click="addDomain" :disabled="!esits"
                >新增
                </el-button
                >
                <el-button
                  type="danger"
                  @click="resetForm(scope)"
                  v-if="scope.$index !== 0"
                  size="small"
                  :disabled="scope.row.status > 1"
                >删除
                </el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <!-- 产品价格 end-->
    </div>

    <!-- 底部按钮 --start-->
    <div class="bottom">
      <el-button type="primary" size="medium" @click="addlist()" v-show="esits==true">确定</el-button>
      <el-button type="info" size="medium" @click="revert()">返回</el-button>
    </div>
    <!-- 底部按钮 --end-->
  </div>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      esits: true,
      listData: {
        id: "",
        clientId: "",
        contractId: "",
        clientName: "",
        contractNumber: "",
        leixing: "",
        status: "",
        bibie: "",
        shengxiaoTime: "",
        shixiaoTime: "",
        clientMessage: {
          contacts: "",
          contactsPhone: "",
          adress: "",
          enterpriseNumber: "",
          enterpriseName: "",
        },
      },
      //状态


      productLists: [],
      clientProducts: [{
        productTuhao: '', productName: "",
        danwei: "", price: "", shuilv: "", createonTime: "", status: "",
      }],
      clientIdarr: [],
      leixingarr: [
        {key: "1", value: "加急"},
        {key: "2", value: "不加急"},
      ],
      value: "",
      statusarr: [
        {key: 1, value: "待审核"},
        {key: 2, value: "驳回"},
        {key: 3, value: "已成功"},
        {key: 4, value: "开启"},
        {key: 5, value: "关闭"},
      ],
      statusarr1: [
        {key: 1, value: "待审核"},
        {key: 2, value: "驳回"},
        {key: 3, value: "已成功"},
        {key: 4, value: "开启"},
        {key: 5, value: "关闭"},
      ],
      bibiearr: [
        {key: "1", value: "现金"},
        {key: "2", value: "支付宝支付"},
        {key: "3", value: "微信支付"},
        {key: "4", value: "网银"},
      ],
      edit: "",
      pgTitle: "编辑合同",
      Mark: 0,
      userId: 0,
      clientId: 0,
    };
  },
  created() {
    this.userId = JSON.parse(localStorage.getItem("message")).Id;
    this.userName = JSON.parse(localStorage.getItem("message")).Name;
    this.edit = this.$route.query.edit;
    if (this.edit == 1) {
      this.pgTitle = "合同详情";
      this.esits = false;

    } else {
      this.pgTitle = "编辑合同";
      this.esits = true;
      this.getCai();
      // this.getquan();
    }
    this.getDat(this.$route.query.id);
  },
  methods: {
    GetProMess(ind, e) {
      this.clientProducts[ind].productTuhao = e.productTuhao
      // this.clientProducts[ind].id = e.id;
      this.clientProducts[ind].productName = e.productName;
      this.clientProducts[ind].danwei = e.danwei;
      this.clientProducts[ind].status = e.status;
    },
    // 编辑与详情页获取数据
    getDat(id) {
      axios(
        "/JX_java/sales/contract/getContractDetails?ccId=" +
        this.$route.query.id
      ).then((res) => {
        let result = res.data.data;
        if ((((result.productList || null) == null) || (result.productList.length == 0)) == true) {
          result.productList = [{productTuhao: '',}]
        }
        this.listData = result;
        this.clientProducts = result.productList
        this.clientId = result.clientId
        console.log(this.listData, 111111111111111111111111111111111111)
        this.clientMessage = result.clientMessage
        this.listData.status = result.status
        if (this.listData.status == 1) {
          this.listData.status = "待审核"
        } else if (this.listData.status == 2) {
          this.listData.status = "驳回"
        } else if (this.listData.status == 3) {
          this.listData.status = "已成功"
        } else if (this.listData.status == 3) {
          this.listData.status = "启用"
        } else {
          this.listData.status = "关闭"
        }
        // for (let i = 0; i < this.clientProducts.length; i++) {
        //   if (this.clientProducts[i].status == 1) {
        //     this.clientProducts[i].status = "待审核"
        //   } else if (this.clientProducts[i].status == 2) {
        //     this.clientProducts[i].status = "驳回"
        //   } else if (this.clientProducts[i].status == 3) {
        //     this.clientProducts[i].status = "已成功"
        //   } else if (this.clientProducts[i].status == 4) {
        //     this.clientProducts[i].status = "启用"
        //   } else {
        //     this.clientProducts[i].status = "关闭"
        //   }
        //
        // }
      })
    },
    // 获取供应商 产品
    getCai() {
      axios("/JX_java/common/getAllSupplierProduct").then((res) => {
        let result = res.data.data;
        this.productLists = result;
      });
    },
    //新增产品
    addlist() {
      const list = {
        clientProducts: [],
        "userId": this.userId,
        "userName": this.userName,
        "clientId": this.clientId,
        "contractId": parseInt(this.$route.query.id),
      }

      this.clientProducts.forEach(e => {
        console.log(e)
        if (e.id == null) {
          const product = {
            "checkflowId": 0,
            "clientId": 0,
            "contractId": 0,
            "createonTime": "",
            "danwei": "",
            "id": 0,
            "kucunShangxian": 0,
            "kucunXiaxian": 0,
            "price": 0,
            "productName": "",
            "productTuhao": "",
            "shenghemessageId": 0,
            "shuilv": "",
            "status": 0,
            "xuhao": 0
          }
          // product.id = e.id
          // product.checkflowId = e.checkflowId
          product.productTuhao = e.productTuhao;
          product.productName = e.productName;
          product.danwei = e.danwei
          product.price = e.price
          product.shuilv = e.shuilv
          product.createonTime = e.createonTime
          product.status = e.status


          list.clientProducts.push(product);
        }

      })
      // console.log(list,1111111111)
      // return ;
      axios
        .post("/JX_java/sales/contract/addSalesProducts?userI=" + this.userId, list)
        .then((res) => {
          if (res.data.data == "操作成功") {
            this.$message.success(res.data.data);
            this.$router.go(-1);
          } else {
            this.$message.error(res.data.data);
          }
        });
    },
    //新增采购-------动态添加
    addDomain() {
      var list = {
        productTuhao: "",
      };
      this.clientProducts.push(list);
    },
    //新增采购-------动态删除
    resetForm(e) {
      this.clientProducts.splice(e.$index, 1);
    },
    //返回
    revert() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/base.scss";

.bigbox {
  width: 98%;
  margin-left: 25px;
}

.nav {
  height: 60px;
  padding: 0 1%;
  position: relative;

  p {
    height: 40px;
    margin: 10px 0;
    line-height: 40px;

    span {
      background: $Header_color;
      color: $Header_color;
    }
  }

  #nav_go5 {
    position: absolute;
    top: 10px;
    right: 1%;

    img {
      height: 16px;
      padding-right: 10px;
    }
  }
}

.conter_box1 {
  background: $white;
  height: 250px;
  width: 98%;
  padding: 5px 1% 0 1%;

  p {
    height: 40px;
    margin-top: 20px;
  }

  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    // color: #909399;
    li {
      width: 33%;
      font-size: 16px;
      margin-bottom: 10px;
      text-align: center;
      margin-top: 10px;

      span {
        display: inline-block;
        width: 25%;
      }
    }
  }
}

.conter_box2 {
  background: $white;
  // height: 100px;
  width: 98%;
  margin-top: 10px;
  padding: 5px 1% 0 1%;

  p {
    height: 40px;
    margin-top: 20px;
  }

  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    // color: #909399;
    li {
      width: 33%;
      font-size: 16px;
      margin-bottom: 10px;
      margin-top: 10px;
      text-align: center;

      span {
        display: inline-block;
        width: 25%;
      }
    }
  }
}

.conter_box3 {
  background: $white;
  // min-height: 160px;
  //max-height: 220px;
  width: 98%;
  margin-top: 10px;
  padding: 5px 1% 0 1%;

  p {
    height: 40px;
    margin-top: 20px;
  }
}

.bottom {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 10px;
  // background: $white;
  position: relative;

  p {
    width: 20%;
    // height: 50px;
    line-height: 40px;
    position: absolute;
    top: 30px;
    left: 1%;
    display: flex;
    justify-content: space-between;
  }
}
</style>
